<template>
  <div>
    <div class="ke__search">
      <k-form inline @submit="onLoad">
        <k-form-item>
          <el-button size="small" icon="el-icon-plus" @click="onClickCreate">新增公司</el-button>
        </k-form-item>

        <k-form-item>
          <el-input placeholder="输入公司名称、法人搜索" size="small" v-model="search.key" style="width: 400px"/>
        </k-form-item>

        <k-form-item>
          <el-button type="info" size="small" native-type="submit" icon="el-icon-search">搜索</el-button>
        </k-form-item>
      </k-form>
    </div>


    <div class="ke__bgfff">
      <el-table :data="list" v-loading="loading" size="small">
        <el-table-column prop="id" label="ID" width="80"/>

        <el-table-column prop="name" label="公司名称"/>

        <el-table-column prop="boss" label="法人"/>

        <el-table-column prop="limit" label="规模"/>

        <el-table-column prop="money" label="注册资本"/>

        <el-table-column prop="create_date" label="成立时间"/>

        <el-table-column prop="code" label="信用代码"/>

        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="{ row, $index }">
            <el-button type="text"
                       icon="el-icon-edit"
                       title="编辑"
                       @click="onClickUserEdit(row, $index)"/>

            <el-button type="text"
                       icon="el-icon-delete"
                       title="删除"
                       @click="onClickUserDelete(row, $index)"/>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination :current-page="page"
                     :total="total"
                     :page-size="limit"
                     @current-change="onPageChange"/>
    </div>

    <!-- 编辑窗口 -->
    <company-edit :show.sync="userEditDialog" ref="editDialog"/>
  </div>
</template>

<script>
  import CompanyEdit from '@/views/zhaopin/company-edit'
  export default {
    name: 'Companys',
    components: { CompanyEdit },
    data () {
      return {
        list: [],
        total: 0,
        loading: true,
        page: 1,
        limit: 20,
        search: {
          sex: -1
        },
        userEditDialog: false
      }
    },
    mounted () {
      this.onLoad()
    },
    methods: {
      onPageChange (page) {
        this.list = []
        this.page = page
        this.onLoad()
      },
      // 加载列表
      onLoad () {
        this.loading = true
        this.$http.get('admin/companys', { page: this.page, limit: this.limit, ...this.search })
          .finally(() => this.loading = false)
          .then(result => {
            this.list = result.list
            this.total = result.total
          })
      },
      // 新增公司
      onClickCreate () {
        this.userEditDialog = true
        this.$refs.editDialog.successCallback = (data) => {
          this.list.unshift({ ...data })
        }
      },
      // 用户编辑
      onClickUserEdit (row, idx) {
        this.userEditDialog = true
        this.$refs.editDialog.data = { ...row, $index: idx }
        this.$refs.editDialog.successCallback = (data) => {
          this.list.splice(idx, 1, { ...data })
        }
      },
      // 删除
      async onClickUserDelete (row, idx) {
        await this.$confirm('确定要删除吗?')
        this.list.splice(idx, 1)
        this.$http.delete(`admin/companys/${row.id}`)
          .then((result) => {
            if (result.res_code === 0) {
              this.$message.success('删除成功')
            } else {
              this.$message.error(result.res_msg)
            }
          })
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
